<template>
	<view class="search-bar">
		<view class="search-input-container" @click="$emit('changeSeachState',true)">
			<input type="text" class="search-input" :class="{'current-search':isSearch}" placeholder="搜索群聊"
				v-model="wordKey" @input="searchWordKey" :disabled="!isSearch"/>
			<u-icon name="search" class="search-icon" :class="{'current-search':isSearch}"></u-icon>
			<view class="cancel-button" v-if="isSearch" @click.stop="onCancel">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wordKey: '',
				disabled:true,
			}
		},
		props: {
			isSearch: {
				type: Boolean
			}
		},
		methods: {
			searchWordKey() {
				this.$emit('searchWordKey', this.wordKey);
			},
			onClick(){
				this.$emit('changeSeachState',true)
				this.$nextTick(()=>{
					this.disabled = false;
				})
			},
			onCancel(){
				this.wordKey = '';
				this.$emit('searchWordKey', this.wordKey);
				this.$emit('changeSeachState',false)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./searchBar.scss";
</style>
